<template>
	<view class="set-rob-order">
		<view class="rob-title">
			<view class="set-rob-title">
				开启抢单
			</view>
			<view class="opent-rob">
				<u-switch @input="upudateSothebusStateFn" :value="robOrderOptenState"></u-switch>
			</view>
		</view>
		<block v-if="sothebusState">
			<block v-if="driveList.records.length > 0">
				<view class="set-rob-conten" v-for="(item,index) in driveList.records">
					<view class="rob-info-conten">
						<view class="set-rob-info">
							<view class="info-inmage">
								<image :src="item.avatar || 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/user_uniapp/static/driver-image.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="info-conten">
								<view class="info-name">
									{{item.nickname}}
								</view>
								<view class="vehicle-info">
									{{item.vehicleNumber}}
								</view>
							</view>
						</view>
						<view class="rob-order">
							<view class="rob-order-title">
								自主接单
							</view>
							<view class="rob-order-opten">
								<u-switch v-model="item.openStatus"></u-switch>
							</view>
						</view>
						<view class="driver-subsidies">
							<view class="subsidies-title">
								司机补助比例
							</view>
							<view class="subsidies-num">
								<input class="subsidies-ipt" v-model="item.subsidyProportion" type="number" maxlength="6" placeholder="请输入司机补助比例">
							</view>
						</view>
					</view>
				</view>
			</block>
			
			<!-- <block v-else>
				<u-empty text="暂无数据" mode="data"></u-empty>
			</block> -->
			<template v-else>
			  <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
			  <l-no-data v-else text="暂无数据" type="data" />
			</template>
		</block>
		<view class="sucess-btn" v-show="sothebusState && driveList.records.length > 0" @click="setList">
			保存
		</view>
	</view>
</template>

<script>
	import { jump } from '@/common/util' 
	import { mapGetters, mapMutations } from 'vuex'
	import { getCarpoolTakeOrderStatus, setCarpoolTakeOrderStatus, driverSubsidyProportionPage, setDriverSubsidyProportion } from '@/common/api/driver.js'
	export default{
		data(){
			return{
				robOrderOpten:true,
				orderOpten:false,
				subsidiesValue:'',
				showSkeleton: true,
				page:{
					size:10000
				},
				driveList:[],
				
				robOrderOptenState:false,
			}
		},
		computed: {
		  ...mapGetters({
			  sothebusState: 'sothebusState'
		  })
		},
		watch:{
			subsidiesValue(newVale){
				if(newVale<0 || newVale >100){
					this.subsidiesValue = ''
				}
			},
			sothebusState:{
				handler(newVal){
					if(newVal){
						this.promptFn('抢单模式已开启')
						this.getList()
						this.robOrderOptenState = true
					}else{
						this.robOrderOptenState = false
					}
				},
				immediate:true,
				deep:true
			},
			orderOpten(newVal){
				if(newVal){
					this.promptFn('已开启自主接单')
				}
			}
		},
		created() {
			this.getSothebusData()
		},
		methods:{
			async getSothebusData(){
			  const [err,res] = await getCarpoolTakeOrderStatus()
			  if (!this.$http.errorCheck(err, res)) return false
			  console.log(res.data)
			  this.setSothebusstate(res.data.data)
			},
			async upudateSothebusStateFn(){
				let judge;
				this.sothebusState ? judge = 0 : judge = 1;
				console.log(judge)
				const [err,res] = await setCarpoolTakeOrderStatus(judge)
				if(res){
					this.setSothebusstate(judge)
				}
			},
			async getList(){
				let [err,res] = await driverSubsidyProportionPage(this.page)
				if (!this.$http.errorCheck(err, res)) return false
				console.log(res,'司机列表数据')
				this.showSkeleton = false
				this.driveList = res.data.data
				let newArr = []
				this.driveList.records.map(res=>{
					res.openStatus ? res.openStatus = true : res.openStatus = false
					newArr.push(res)
				})
				this.driveList.records = newArr
			},
			async setList(){
				let _then = this
				let flag = true
				this.driveList.records.map((res,index)=>{
					if(Number(res.subsidyProportion) > 100 || Number(res.subsidyProportion) < 0){
						_then.promptFn(`${res.nickname}补助比例不能大于100%或小于0%`)
						flag = false
					}
				})
				if(!flag){
					return false
				}
				let recordsCv = JSON.parse(JSON.stringify(this.driveList.records))
				let newData = recordsCv.map((res,index)=>{
					if(res.openStatus){
						res.openStatus = 1
					}else{
						res.openStatus = 0
					}
					
					let person = {
						driverUserId:res.driverUserId + '',
						openStatus:res.openStatus + '',
						subsidyProportion:Number(res.subsidyProportion)
					}
					
					return person
				})
				console.log(newData)
				
				let [err,res] = await setDriverSubsidyProportion(JSON.parse(JSON.stringify(newData)))
				console.log(res.data)
				if(res.data.data){
					jump()
				}
			},
			promptFn(value){
				uni.showToast({
					title:value,
					duration:2000,
					icon:"none"
				})
			},
			...mapMutations({
			  setSothebusstate: 'storeUtils/setSothebusstate'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.set-rob-order{
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		padding:  0rpx 30rpx;
		padding-top: 30rpx;
		background-color: #F4F4F4;
		padding-bottom: 170rpx;
		.rob-title{
			width: 100%;
			background-color: #fff;
			border-radius: 18rpx;
			padding: 40rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: sticky; 
			top: 0;
			left: 0;
			z-index: 100000;
		}
		// 保存
		.sucess-btn{
			width: 90%;
			height: 115rpx;
			line-height: 115rpx;
			font-size: 40rpx;
			font-weight: 400;
			text-align: center;
			background-image: linear-gradient(to right, #f2c790, #daa665);
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 18rpx;
			color: #7A5032;
			letter-spacing: 2rpx;
			box-shadow: 0 8rpx 14rpx 2rpx rgba(138, 76, 0, 0.16);
			z-index: 100000;
		}
		.set-rob-conten{
			margin-top: 16rpx;
			border-radius: 18rpx;
			padding-bottom: 30rpx;
			padding-top: 30rpx;
			transition: 1s all;
			 // box-shadow: 0 40px 40px -14px #dcdcdc,0 -1rpx 200rpx -14px #dcdcdc;
			 background-color: #fff;
			 animation: .5s rob-move linear;
		}
		@keyframes rob-move {
			0%{
				// transform: translateX(-110%);
				transform: scale(0.1);
			}
			100%{
				transform: scale(1);
				// transform: translateX(0);
			}
		}
		.set-rob-header{
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.set-rob-title{
				font-size: 40rpx;
				font-weight: 400;
			}
		}
		.rob-info-conten{
			width: 100%;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			margin-bottom: 20rpx;
			.set-rob-info{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.info-inmage{
					width: 150rpx;
					height: 150rpx;
					border-radius: 100%;
					overflow: hidden;
				}
				.info-conten{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 30rpx;
					.info-name{
						font-size: 40rpx;
						font-weight: 400;
						margin-bottom: 10rpx;
					}
					.vehicle-info{
						font-size: 40rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.rob-order{
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;
				.rob-order-title{
					font-size: 40rpx;
					font-weight: 400;
				}
				.rob-order-opten{
					
				}
			}
			.driver-subsidies{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;
				.subsidies-title{
					font-size: 40rpx;
					font-weight: 400;
				}
				.subsidies-num{
					width: 55%;
					height: 70rpx;
					border-radius: 10rpx;
					border: 2rpx solid #dcdcdc;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					font-weight: 400;
					padding-left: 4rpx;
					padding-right: 20rpx;
					justify-content: center;
					text-align: center;
				}
				.subsidies-num::after{
					content: '%';
					display: inline-block;
					font-size: 30rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>